<template>
  <px-dialog v-model="dialogVisible" class="equip-dialog-wrap" title="工作项详情" width="50%" align-center>
    <ColumnsTable :columns="TABLE_COLUMNS" :data="data">
      <template #value="{ scope }">
        <!-- <template v-if="scope.prop === 'positionCodesDesc'">
          <span>{{ scope.data.positionCodesDesc ? scope.data.positionCodesDesc.join() : "-" }}</span>
        </template> -->
        <template v-if="scope.prop === 'positionCodesDesc' && data.positionCodesDesc">
          <px-tag v-for="(item, index) in data.positionCodesDesc" :key="index" class="ml-2" style="margin-top: 2px; margin-bottom: 2px" type="info">{{
            item
          }}</px-tag>
        </template>
      </template>
    </ColumnsTable>
  </px-dialog>
</template>

<script setup lang="ts">
import ColumnsTable from "@/views/all/equip/inspect/components/ColumnsTable.vue";
const TABLE_COLUMNS = [
  [
    {
      label: "类型",
      value: "itemTypeDesc"
    }
  ],
  [
    {
      label: "时间",
      value: "time"
    },
    {
      label: "地块",
      value: "facCodeDesc"
    }
  ],
  [
    {
      label: "区域",
      value: "positionCodesDesc"
    }
  ],
  [
    {
      label: "原因",
      value: "reason"
    }
  ],
  [
    {
      label: "申请人员",
      value: "applicantName"
    },
    {
      label: "申请部门",
      value: "deptName"
    }
  ],
  [
    {
      label: "ERC人员",
      value: "ercName"
    }
  ],
  [
    {
      label: "备注",
      value: "remark"
    }
  ]
];
const props = defineProps(["data", "type"]);
const dialogVisible = defineModel();
</script>

<style lang="scss" scoped>
@import url("../../../scss/add-dialog.scss");

.align-right {
  :deep(.px-form-item__content) {
    justify-content: flex-end;
  }
}
</style>
